import "./login.scss";
import { TextField } from "../textfield/textfield";
import { Link } from "react-router-dom";
import { Button } from "../button/button";
import { useNavigate } from "react-router-dom";
import { useState } from "react";
import { getTokenLocal } from "@/api/login/login";
import { message } from "antd";

const Login = (): React.ReactElement => {
  const navigate = useNavigate();
  // 账号密码数据
  const [account, setAccount] = useState("");
  const [password, setPassword] = useState("");
  // 输入框报错以及报错信息
  const [accError, setAccError] = useState(false);
  const [accErrorMessage, setAccErrorMessage] = useState("");
  // 密码框报错以及报错信息
  const [passwordError, setPasswordError] = useState(false);
  const [passwordErrorMessage, setPasswordErrorMessage] = useState("");

  // 调用登录接口
  async function Login() {
    let res = await getTokenLocal({ username: account, password: password });
    if (res.data.token) {
      navigate("/dashboard");
      localStorage.token = res.data.token;
      message.success("登录成功");
    } else {
      //@ts-expect-error
      message.error(res.message);
    }
  }

  const testInputStatus = () => {
    if (!account) {
      setAccError(true);
      setAccErrorMessage("账号不能为空");
      return;
    }
    if (!password) {
      setPasswordError(true);
      setPasswordErrorMessage("密码不能为空");
      return;
    }
    Login();
  };

  return (
    <>
      <div className="dashboard_login_box">
        <div className="dashboard_login_title">
          <h4 className="title_main">登录</h4>
        </div>
        <div className="dashboard_login_main">
          <div className="dashboard_login_textfield">
            <div className="dashboard_textfield_main">
              <TextField
                type="text"
                className="textfield"
                placeholder="SuperID账号"
                error={accError}
                errorMessage={accErrorMessage}
                onChange={(v) => setAccount(v)}
              />
            </div>
            <div className="dashboard_textfield_main">
              <TextField
                type="password"
                className="textfield"
                placeholder="输入密码"
                error={passwordError}
                errorMessage={passwordErrorMessage}
                onChange={(v) => setPassword(v)}
              />
            </div>
            <div className="checkbox_dashboard">
              <TextField type="checkbox" label="记住账号" />
              <Link to={"/login"} className="is_forgot">
                忘记密码?
              </Link>
            </div>
          </div>
          <div className="dashboard_login_btn">
            <Button
              label={"登录SuperID账号"}
              className="dashboard_button_login"
              onClick={testInputStatus}
            />
            <div className="link_box">
              <Link to={"/dashboard"}>以游客身份登录</Link>
              <Link to={"/register"}>账号注册</Link>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default Login;
